<!-- 需求列表  -->
<template>
  <pageHeader
    show-back
    title="BOM树视图"
    :breadCrumb="['工厂建模', 'BOM树视图']"
  />
  <a-spin :loading="loading" class="cantainer">
    <a-row :gutter="25">
      <a-col :span="4">
        <div class="tree">
          <a-tree
            :data="treeData"
            v-if="treeData.length"
            :field-names="{ key: 'uuid', title: 'bomName' }"
            blockNode
            default-expand-all
            @select="select"
          >
            <template #title="nodeData">
              <div>{{ nodeData.bomName }}</div>
            </template>
            <template #icon>
              <icon-menu />
            </template>
          </a-tree>
        </div>
      </a-col>
      <a-col :span="16">
        <div class="tab">产品信息</div>
        <a-form :model="formData" ref="refForm" auto-label-width class="form">
          <a-row :gutter="15">
            <a-col :span="12">
              <a-form-item label="关联产品" field="productId">
                <a-input
                  placeholder="无需输入，自动带入"
                  :model-value="formData.management?.name"
                  disabled
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="产品编码">
                <a-input
                  placeholder="无需输入，自动带入"
                  :model-value="formData.management?.number"
                  disabled
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="规格型号">
                <a-input
                  placeholder="无需输入，自动带入"
                  :model-value="formData.management?.spec"
                  disabled
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="基本单位">
                <a-input
                  placeholder="无需输入，自动带入"
                  :model-value="formData.management?.unitData?.name"
                  disabled
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
        <div class="tab">BOM详情</div>
        <a-form :model="formData" ref="refForm" auto-label-width class="form">
          <a-row :gutter="15">
            <a-col :span="12">
              <a-form-item label="产品BOM编码">
                <a-input
                  placeholder="无需输入，系统自动生成..."
                  disabled
                  v-model="formData.bomCode"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="BOM名称" field="bomName">
                <a-input
                  disabled
                  v-model="formData.bomName"
                  placeholder="请输入产品BOM名称"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="BOM版本号" field="bomEdition">
                <a-input
                  disabled
                  v-model="formData.bomEdition"
                  placeholder="请输入产品bom版本号"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="启用状态" field="state">
                <a-select
                  v-model="formData.state"
                  placeholder="请选择"
                  disabled
                >
                  <a-option
                    v-for="(item, index) in ['启用', '停用']"
                    :key="item"
                    :value="index + 1"
                  >
                    {{ item }}
                  </a-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
        <div class="tab">产品BOM明细</div>
        <a-table :data="formData.productBomDetail">
          <!-- arco-table的插槽，默认为columns -->
          <template #columns>
            <a-table-column
              title="BOM名称"
              :width="200"
              data-index="productBomDetail.bomName"
              align="center"
            />
            <a-table-column
              title="BOM版本号"
              :width="200"
              data-index="productBomDetail.bomEdition"
              align="center"
            />
            <a-table-column
              title="物料编码"
              :width="200"
              data-index="productBomDetail.management.number"
              align="center"
            />
            <a-table-column
              title="物料名称"
              :width="200"
              data-index="productBomDetail.management.name"
              align="center"
            />
            <a-table-column
              title="规格型号"
              :width="180"
              data-index="productBomDetail.management.spec"
              align="center"
            />
            <a-table-column
              title="单位"
              :width="100"
              data-index="productBomDetail.management.unitData.name"
              align="center"
            />

            <a-table-column
              :width="130"
              fixed="right"
              title="标准用量"
              align="center"
            >
              <template #cell="{ record }">
                <a-input-number
                  :min="1"
                  v-model="record.dosage"
                  disabled
                  hide-button
                />
              </template>
            </a-table-column>
            <a-table-column :width="130" fixed="right" align="center">
              <template #cell="{ record }">
                <a-input-number
                  :min="1"
                  v-model="record.wastage"
                  :max="100"
                  disabled
                  hide-button
                >
                  <template #suffix> % </template>
                </a-input-number>
              </template>
            </a-table-column>

            <a-table-column
              :width="130"
              fixed="right"
              title="材料属性"
              align="center"
            >
              <template #cell="{ record }">
                <a-input v-model="record.materialProperty" disabled />
              </template>
            </a-table-column>
          </template>
        </a-table>
      </a-col>
    </a-row>
  </a-spin>
</template>

<script lang="ts" setup>
  import { reactive, onMounted, ref, nextTick } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  import { TbomBase, TProductBomDetail } from '@/api/FactoryModeling/type';
  import { GetProductBomTree, GetProductBom } from '@/api/FactoryModeling';
  import uniqueid from 'lodash.uniqueid';

  let route = useRoute();
  let loading = ref(false);
  const router = useRouter();
  let formData = reactive<TbomBase>({});
  let treeData = ref<any[]>([]);
  const select = async (selectedKeys: any, { node }: any) => {
    if (node.id) {
      loading.value = true;
      let res = await GetProductBom({ id: node.id });
      Object.assign(formData, res);
    }
    loading.value = false;
  };

  let circulateDate = (list?: any[]): any[] => {
    return (
      list?.map((item) => {
        return {
          ...item,
          uuid: uniqueid(''),
          children: circulateDate(item.children),
        };
      }) || []
    );
  };
  let loadTree = async () => {
    loading.value = true;
    let res = await GetProductBomTree(route.query.saveId);
    treeData.value = circulateDate([res]);
    select('', { node: res });
    loading.value = false;
  };
  loadTree();
</script>

<style scoped lang="less">
  .cantainer {
    display: flex;
    height: 900px;
    .tree {
      border-right: 1px solid var(--color-neutral-4);
      height: 900px;
    }

    .tab {
      border-left: 4px rgb(var(--arcoblue-6)) solid;
      padding-left: 20px;
      margin-bottom: 20px;
      margin-top: 20px;
      font-size: 20px;
    }
  }
</style>
